<template>
	<view>
		<!-- 卡片区域 -->
		<view class="cardContainer">
			<view class="cardImg">
				<image mode="widthFix" :src="punchData.url"></image>
			</view>
			<!-- <view class="topWord">
				<view class="word">technique</view>
				<view class="accent">[tekˈniːk]</view>
			</view> -->
			<view class="contentContainer">
				<view class="left">
					<view class="avator">
						<image :src="punchData.head"></image>
					</view>
					<view class="authorDesc">
						<view class="name">{{punchData.name}}</view>
						<view class="nowDay">{{punchData.date}}</view>
					</view>
				</view>
				<view class="right">
					<view class="nowWord">
						<view class="num">{{punchData.dayWord}}</view>
						<view class="chinese">今日单词</view>
					</view>
					<view class="nowWord">
						<view class="num">{{punchData.persist}}</view>
						<view class="chinese">坚持天数</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部打卡区域 -->
		<button open-type="share" class="bottomPunch" @click="toPunch" :style="{'backgroundColor':themeColor}">
			<view class="punch">返回首页</view>
		</button>
		
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import {getPunch} from "@/api/user.js";
	import popup from "@/components/popup.vue";
	export default {
		components:{popup},
		data() {
			return {
				punchData:{},
				themeColor:"",
				themeColorLess:"",
			}
		},
		methods: {
			toPunch(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
		},
		async onLoad(){
			//获取主题颜色
			let color = uni.getStorageSync("color");
			this.themeColor = JSON.parse(color).themeColor;
			this.themeColorLess = JSON.parse(color).themeColorLess;
			let ans = (await getPunch()).data;
			console.log("ans",ans);
			if (ans.code != 200) {
				this.$refs.popup._popError(ans.error);
				return;
			}
			this.punchData = ans.data;
		}
	}
</script>

<style lang="scss" scoped>
	/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
	@font-face {
	  font-family: "思源宋体 Heavy";font-weight: 900;src: url("//at.alicdn.com/wf/webfont/o0WWhG36b3mC/dKlC8tku5oapRRPg4FZb6.woff2") format("woff2"),
	  url("//at.alicdn.com/wf/webfont/o0WWhG36b3mC/Vf81ZxzQcrt00jSq43O5V.woff") format("woff");
	  font-display: swap;
	}
	// 卡片区域
	.cardContainer{
		margin: 60rpx 6%;
		position: relative;
		
		.cardImg{
			overflow: hidden;
			border-radius: 16rpx;
			
			image{
				border-radius: 16rpx;
				width: 100%;
				box-shadow: 0 0 16rpx -4rpx #242424;				
			}
		}
		
		.topWord{
			position: absolute;
			top: 50rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			flex-direction: column;
			font-style: italic;
			font-family: 思源宋体 Heavy;
			text-shadow: 0 4rpx 8rpx #242424;
			
			.word{
				font-size: 70rpx;
				color: $theme-color;
			}
			.accent{
				font-size: 50rpx;
				color: $theme-color-less;
			}
		}
		
		.contentContainer{
			background-color: rgba(0, 0, 0, 0.2);
			position: absolute;
			bottom: 50rpx;
			display: flex;
			justify-content: space-between;
			width: 100%;
			
			.left{
				padding-left: 26rpx;
				display: flex;
				height: 100rpx;
				.avator{
					width: 100rpx;
					height: 100%;
					border-radius: 100%;
					overflow: hidden;
					
					image{
						width: 100%;
						height: 100%;
					}
				}
				
				.authorDesc{
					height: 100%;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					
					.name{
						color: #EDEFF7;
						font-size: 30rpx;
						font-weight: 600;
					}
					
					.nowDay{
						color: #e3e3e3;
						font-size: 24rpx;
						padding-top: 10rpx;
					}
				}
			}
			
			.right{
				padding-right: 26rpx;
				display: flex;
				align-items: center;
				height: 100%;
				.nowWord{
					display: flex;
					flex-direction: column;
					
					.num{
						font-size: 42rpx;
						color: #EDEFF7;
						font-weight: 700;
					}
					
					.chinese{
						color: #e3e3e3;
						font-size: 24rpx;
						padding-top: 12rpx;
					}
				}
				
				.nowWord:nth-child(2){
					margin-left: 30rpx;
				}
				
			}
			
		}
	}
	
	// 底部打卡区域
	.bottomPunch{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: $theme-color;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.punch{
			font-size: 32rpx;
			color: #efefef;
			font-weight: 600;
		}
	}
	
</style>
